<!-- eslint-disable -->
<template>
  <el-form :model="props.formItem" label-width="100" class="p-2 ">
    <el-form-item label="文本类型">
      <el-radio-group v-model="props.formItem.type" class="ml-4">
        <el-radio label="text">文本框</el-radio>
        <el-radio label="password">密码框</el-radio>
        <el-radio label="textarea">文本域</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="标签名称">
      <el-input v-model.trim="props.formItem.label" />
    </el-form-item>
    <el-form-item label="表单字段" required prop="field" >
      <el-input v-model.trim="props.formItem.field" />
    </el-form-item>
    <el-form-item label="栅格宽度">
      <el-input v-model.number="props.formItem.col" placeholder="默认24" />
    </el-form-item>
    <el-form-item label="文本域行数" v-if="props.formItem.type === 'textarea'" placeholder="请输入行数">
      <el-input v-model="props.formItem.rows" />
    </el-form-item>
    <FormRulesConfig :form-item="props.formItem" />
    <el-form-item label="是否可清除">
      <el-switch v-model="props.formItem.clearable" />
    </el-form-item>
    <el-form-item label="是否只读">
      <el-switch v-model="props.formItem.readonly" />
    </el-form-item>
    <el-form-item label="是否禁用">
      <el-switch v-model="props.formItem.disabled" />
    </el-form-item>
    <el-form-item label="是否展示密码" v-if="props.formItem.type === 'password'">
      <el-switch v-model="props.formItem.showPassword" />
    </el-form-item>
    <el-form-item label="最大输入长度" v-if="!props.formItem.readonly&&!props.formItem.disabled">
      <el-input-number v-model="props.formItem.maxlength" :min="0" :max="Infinity" />
    </el-form-item>
    <el-form-item label="是否显示统计字数" label-width="140px" v-if="!props.formItem.readonly&&!props.formItem.disabled">
      <el-switch v-model="props.formItem.showWordLimit" />
    </el-form-item>
    <el-form-item label="占位文字">
      <el-input v-model="props.formItem.placeholder" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="样式类名">
      <el-input v-model="props.formItem.className" placeholder="请输入" />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts" name="Text">
import FormRulesConfig from './FormRulesConfig.vue'
const props = defineProps<{ formItem: SubmitFormSchema }>()
</script>
